getting-started-bg = #c8c8c8
getting-started-height = 40px

intro-feature-margin = 50px
intro-feature-column = 3
intro-quick-start-column = 2

.center
  text-align center

#banner
  @extend $banner-background
  padding-top: 20px
  padding-bottom: 20px
  @media mq-normal
    padding-top: 20px

.btn
  display: inline-block
  padding: 15px 30px
  font-family: font-title
  font-weight: bold
  border: 3px solid color-blue
  border-radius: 3px
  color: color-blue
  font-size: 16px
  text-transform: uppercase
  transition: 0.2s
  text-decoration: none
  line-height: 1
  &:hover
    color: #fff
    background: color-blue

.btn-min
  display: inline-block
  padding: 15px 30px
  font-family: font-title
  font-weight: bold
  border: 3px solid color-grey
  border-radius: 3px
  color: color-blue
  font-size: 10px
  text-transform: uppercase
  transition: 0.2s
  text-decoration: none
  line-height: 1
  &:hover
    color: #fff
    background: color-grey

#banner-title
  color: #555
  font: 300 35px font-title
  text-shadow: 1px 0 #eee
  line-height: 1.3

$banner-getting-started-font
  font-family: font-mono
  font-size: 14px
  line-height: getting-started-height
  @media mq-normal
    font-size: 16px

#banner-getting-started
  clearfix()
  padding-top: 30px

#banner-getting-started-prefix
  @extend $banner-getting-started-font
  float: left
  background: getting-started-bg
  padding-left: 15px
  color: #999

#banner-getting-started-input
  @extend $banner-getting-started-font
  float: left
  float: left
  background: getting-started-bg
  color: #555
  border: none
  padding: 0 15px
  margin: 0
  height: getting-started-height
  border-radius: 0

#banner-getting-started-btn
  float: left
  background: #bbb
  color: #777
  text-decoration: none
  width: getting-started-height
  height: @width
  text-align: center
  line-height: @width
  font-size: 16px
  &:hover
    background: #aaa
    color: #555
  &:before
    @extend $icon-font
    content: "\f061"

#banner-share
  padding: 20px 0 0
  display: none
  @media mq-normal
    display: block

.intro-wrap
  padding: 20px 0
  @media mq-normal
    padding: 40px 0

.intro-feature-wrap
  column(12)
  @media mq-normal
    column(6)

.intro-features
  margin: 20px 0
  position: relative
  font-weight: 300
  font-family: font-title
  color: color-blue
  font-size: 30px
  padding-bottom: 5px
  line-height: 1em
  text-align: center
  @media mq-normal
    margin: 40px

.features li
  margin: 5px 0
  position: relative
  font-weight: 200
  font-family: font-title
  font-size: 20px
  padding-bottom: 2px
  line-height: 1em
  @media mq-normal
    margin: 4px

.features
  list-style: initial

#intro-btn-wrap
  text-align: center
  margin-top 50px

#intro-btn
  display: inline-block
  padding: 15px 30px
  font-family: font-title
  font-weight: bold
  border: 3px solid color-blue
  border-radius: 3px
  color: color-blue
  font-size: 16px
  text-transform: uppercase
  transition: 0.2s
  text-decoration: none
  line-height: 1
  &:hover
    color: #fff
    background: color-blue
